<%@ include file="include/header.jsp" %>

<div class="container clearfix">
  
    <div class="left_column">
	<!-- Add links, images, news e.t.c -->
      <h3>Why register ?</h3><br/>	  
	  <ul>
	  	<li>To get more functionality...</li>
		<li>To help us build a better application...</li>		
	  </ul>
	  <p>If you want access in more features, you can <a href="contact.jsp">contact</a> us.</p>
	   
    </div>
	
    <div class="center_column">
	<!-- Add the main content of your page -->
      <h3>Registration</h3><br/>
	  <p>Please fill the fields below with your data. The fields with an asterisk are required.</p>
	  
	  <form action="register" method="post" 
	  	enctype="application/x-www-form-urlencoded" name="registration">
		<p>
			<div class="${error["nickname"].CSSClass}">
				<label>
				Nickname:  <input name="nickname" value= "${registration.nickName}" type="text" size="30" maxlength="30"> * 
				</label>
				${error["nickname"].message}
			</div> 
		</p>
		
		<p>
			<div class="${error["username"].CSSClass}">
				<label>
				Email:   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="username" value= "${registration.userName}" type="text" size="30" maxlength="100"> * 
				</label>
				${error["username"].message}
			</div>
		</p>
		
		<p>
			<div class="${error["password"].CSSClass}">
				<label>
				Password: <input name="password" type="password" size="30" maxlength="30"> * 
				</label>
				${error["password"].message}
			</div>
		</p>
		
		<p>Repeat your password to ensure there is no mistake.</p>
		
		<p>
			<div class="">
				<label>
				Password: <input name="password" type="password" size="30" maxlength="30"> * 
				</label>
			</div>
		</p>
		
		<br/>
		
		<p>		
			<label>
			First name: <input name="firstname" type="text" value= "${registration.firstName}" size="30" maxlength="50"> 
			</label>		
		</p>
		
		<p>		
			<label>
			Last  name: <input name="lastname" type="text" value= "${registration.lastName}" size="30" maxlength="50"> 
			</label>		 
		</p>
		
		<br/> 
		
		<p>
			<label>
			Country: &nbsp;&nbsp;&nbsp;
			<select name="country" >
				  ${countries}			
				  <!-- <option selected>Greece</option>
				  <option >Italy</option>
				  <option>Spain</option> -->
			</select>
			* 
			</label>
		</p>
		
		<p>
			<label>
			City: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input name="city" type="text" value= "${registration.city}" size="30" maxlength="50">
			</label>
		</p>
		
	  	<br/>
		
		<input class="active"  type="submit" value="Register" name="register" />

		<input class="passive" name="reset" type="reset" />		
		
	  </form>
	  
	  <br/><br/>
              	  
    </div> <!--center_column-->
	
  </div>  <!-- container -->





<%@ include file="include/footer.jsp" %>
